<template>
  <div class="transferBox mgt-50">
    <div class="transfer">
      <p class="font-36 pd-50 color-f text-c fontW-b font-f-ib">{{ $t('transfer.title') }}</p>
      <div class="mgt-30">
        <div class="workBox flex-n-center">
          <div class="workInfo">
            <div>
              <img src="../../assets/img/supef.png" alt="">
            </div>
            <div class="workText">
              <p class="font-15 color-f text-c fontW-b font-f-ib">Super ss</p>
              <p class="font-15 color-f text-c fontW-b font-f-ib">Super ss  #3137</p>
            </div>
          </div>
          <div class="workInfo">
            <div>
              <img src="../../assets/img/supef_a.png" alt="">
            </div>
            <div class="workText">
              <p class="font-15 color-f text-c fontW-b font-f-ib">Super ss</p>
              <p class="font-15 color-f text-c fontW-b font-f-ib">Super ss  #2803</p>
            </div>
          </div>
        </div>
        <div s class="trans_sub mgt-20">
          <div class="transfer_sub mg-0">
            <p class="font-26 color-f text-l fontW-b font-f-ib">{{$t('transfer.tips')}}</p>
            <div class="inputText mgt-10">
              <div class="inputBox h-37 bg-5d border-r boxS-i-4 mgt-10">
                <input class="color-d6 font-18" type="text" placeholder="e.g. 0xi9h9... or destination.eth">
              </div>
              <div class="subBox mgt-10">
                <el-button
                class="color-0 bg-theme fontW-7 font-28 box-4 text-s mg-0"
                type="primary">{{ $t("btn.transfer") }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Footer from '../../components/Footer'
export default {
  components: {
    Footer
  },
  data () {
    return {}
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
.transferBox {
  .transfer {
    margin: 30px auto 50px;
    .workBox {
      .workInfo {
        .workText {
          margin-top: 20px;
        }
      }
      .workInfo:nth-child(2) {
        margin-left: 20px;
      }
    }
    .trans_sub {
      .transfer_sub {
        width: 30%;
        .inputText {
          .inputBox {
            input {
              width: 100%;
              height: 100%;
              background: none;
              padding: 0 5px;
            }
          }
          .subBox {
            button {
              display: block;
            }
            /deep/.el-button--primary {
              width: 120px;
              background: #7de9ff;
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>
